<template>
  <div id="">
    <ul class="allocationList">
      <li v-for="(item,index) in payforType"
      :key="item.key"
      @click="chooseList(index)">
        <span>{{item.payTypeName}}</span>
        <img src="@/assets/images/true@2x.png" width="15" alt="" v-if="item.isChoose">
      </li>
    </ul>
  <div class="fixedBottom">
    <button type="button" name="button" class="blockBtn" @click="chooseBtn">确定</button>
  </div>
  </div>
</template>
<script>
export default {
  name: "",
  data: () => ({
    payforType:[],
    choosePayforType:'',    //存储选中的付款方式对象
  }),
  mounted() {
    //do something after mounting vue instance
    let that = this;
    network.get(configUrl.GETPAYTYPE_URL,'',function(res){
      console.log(res);
      let dataList = res.dataList;
      for (var i = 0; i < dataList.length; i++) {
        dataList[i].isChoose = false;
      }
      that.payforType = dataList;

    },function(err){
      console.log(err);
    });
  },
  methods:{
    chooseList(index){
      var that =  this;
      var payforType = that.payforType;
      for (var i in payforType) {
        payforType[i].isChoose = false;
        if (i==index) {
          payforType[i].isChoose = true;
        }
      }
      that.choosePayforType = payforType[index];
      that.payforType = payforType;
    },
    chooseBtn(){
      this.$emit('chooseBtn',{
        choosePayforType:this.choosePayforType
      });
    }
  }
}
</script>
<style lang="scss" scoped>

.allocationList{
  padding: 0 10px;
  font-size: 1rem;
  li{
    @include flex;
    justify-content: space-between;
    line-height: 3rem;
    border-bottom: 1px solid $borderColor;

  }
}

</style>
